<template>
  <!-- 园地 -->
  <div class="container">
    <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
      <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
        <div v-if="list.length==0" class="list-nodate">暂无数据</div>
        <div class="list">
          <div class="item" v-for="item in list" :key="item.id">
            <div class="user">
              <img class="headimg" :src="item.avatar|imgPath" alt srcset>
              <div class="info">
                <div class="name">{{item.realname}}</div>
                <div class="time">{{item.shareTimes}}</div>
              </div>
            </div>
            <div class="content">{{item.content}}</div>
            <div class="imgs">
              <img v-for="img in item.imagesList" :key="img" class="img" :src="img|imgPath" alt>
            </div>
            <div class="handlers">
              <div class="cell">
                <van-icon name="share" size="16px"/>
                {{item.shareTimes}}
              </div>
              <div class="cell" @click="onComment(item.id)">
                <van-icon name="chat-o" size="16px"/>
                {{item.commentTimes}}
              </div>
              <div class="cell" @click="onLike(item.id)">
                <van-icon name="thumb-circle-o" size="16px"/>
                {{item.likeTimes}}
              </div>
            </div>
          </div>
        </div>
      </van-list>
    </van-pull-refresh>
  </div>
</template>

<script>
export default {
  data () {
    return {
      age: 1,
      limit: 20,
      isLoading: false,
      loading: false,
      finished: false,
      list: []
    }
  },
  created () {
    this.$store.commit('setCurrentBar', 2)
  },
  methods: {
    onComment (id) {
      this.$router.push({
        path: `/friend/comment/${id}`
      })
    },
    onRefresh () {
      this.page = 1
      this.finished = false
      this.getList(list => {
        this.list = list
        this.isLoading = false
      })
    },
    onLoad () {
      this.getList(list => {
        this.loading = false
        if (list.length < this.limit) {
          this.finished = true
        }
        if (this.page === 1) {
          this.list = list
        } else {
          this.list = this.list.concat(list)
        }
        this.page++
      })
    },
    getList (callback) {
      // 获取朋友圈列表
      this.$axios
        .get('/xbkj-dj/web/user/feeds/list', {
          page: this.page,
          limit: this.limit
        })
        .then(res => {
          callback && callback(res.page.list)
        })
    },
    onLike (feedsId) {
      // 点赞
      this.$axios
        .post('/xbkj-dj/web/user/feeds/likeFeeds', {
          feedsId
        })
        .then(res => {
          if (res.code === 0) {
            this.$toast('点赞成功')
            // this.onRefresh()
          } else {
            this.$toast(res.msg)
          }
        })
    },
    getComments () {
      // 获取朋友圈评论
      this.$axios.get('/xbkj-dj/web/user/feeds/listComment').then(res => {
        console.log(res)
      })
    }
  }
}
</script>

<style lang="less" scoped>
.container {
  // background-color: #fff;
}
.list-nodate {
  height: 116px;
  text-align: center;
  line-height: 116px;
  font-size: 14px;
  color: #ccc;
  background-color: #fff;
}
.list {
  background-color: #f4f2f4;
  .item {
    background-color: #fff;
    padding: 0 20px;
    margin-bottom: 10px;
  }
  .user {
    display: flex;
    align-items: center;
    padding-top: 20px;
    .headimg {
      flex: 0 0 50px;
      width: 50px;
      height: 50px;
      border-radius: 50%;
      margin-right: 10px;
    }
    .info {
      .name {
        color: #ec3333;
        font-weight: bold;
        margin-bottom: 5px;
        line-height: 1;
      }
      .time {
        font-size: 12px;
        color: #ddd;
      }
    }
  }
  .content {
    padding: 10px 0 15px 0;
  }
  .imgs {
    // display: flex;
    // flex-wrap: wrap;
    margin-bottom: 20px;
    .img {
      width: 60%;
      border-radius: 6px;
    }
  }
  .handlers {
    display: flex;
    justify-content: space-around;
    border-top: 1px solid #f4f2f4;
    .cell {
      display: flex;
      align-items: center;
      justify-content: center;
      flex: 0 0 33%;
      padding: 5px 0 15px 0;
      .van-icon {
        margin-right: 5px;
      }
    }
  }
}
</style>
